<template>
  <div style="width: 100%;height: 100%;background-color: white;">
    <div class="list">
      <div style="padding-left: 20px">
        <div v-for="(item,i) in itemTitle"
             :key="i"
             @click="toItem(i+1)"
             :class="activeKey==(i+1)?'focus':''">{{ item }}</div>
      </div>
    </div>

    <newly-increased-customer ref="newlyIncreasedCustomer" v-if="activeKey == 1"></newly-increased-customer>
    <newly-increased-contract ref="newlyIncreasedContract" v-if="activeKey == 2"></newly-increased-contract>
    <follow-record-customer ref="followRecordCustomer" v-if="activeKey == 3"></follow-record-customer>
    <high-seas-customer ref="highSeasCustomer" v-if="activeKey == 4"></high-seas-customer>
    <customer-arrival ref="customerArrival" v-if="activeKey == 5"></customer-arrival>
    <customer-revisit ref="customerRevisit" v-if="activeKey == 6"></customer-revisit>
  </div>

</template>

<script>
  import newlyIncreasedCustomer from "./tabs/newlyIncreasedCustomer";
  import effectiveCustomer from "./tabs/effectiveCustomer";
  import signingCustomer from "./tabs/signingCustomer";
  import customerFollowUp from "./tabs/customerFollowUp";
  import newlyIncreasedContract from "./tabs/newlyIncreasedContract";
  import customerScrapBill from "./tabs/customerScrapBill";
  import rankingReport from "./tabs/rankingReport";
  import followRecordCustomer from './tabs/followRecordCustomer'
  import highSeasCustomer from './tabs/highSeasCustomer'
  import customerArrival from './tabs/customerArrival'
  import customerRevisit from './tabs/customerRevisit'

  export default {
    name: "serviceReportFormsMain",
    components:{
      newlyIncreasedCustomer,
      effectiveCustomer,
      signingCustomer,
      customerFollowUp,
      newlyIncreasedContract,
      customerScrapBill,
      rankingReport,
      followRecordCustomer,
      highSeasCustomer,
      customerArrival,
      customerRevisit,
    },
    data(){
      return{
        currentKey: 1,
        activeKey: "1",
        itemTitle: [
          "新增客户报表",
          "新增合同报表",
          "外呼报表",
          "客户公海报表",
          "客户到店报表",
          "客户再访报表",
        ],
      }
    },
    methods:{
      showTab(key){
        this.currentKey = key;
      },
      toItem(i){
        this.activeKey = i
      }
    }
  }
</script>

<style scoped scoped lang="less">
  ::-webkit-scrollbar {
    display: none;
  }
  .list{
    width: 100%;
    height: 50px;
    overflow: hidden;
    overflow-x: scroll;
    border-bottom: 1px solid #f6f6f6;
    &>div{
      display: flex;
      width: max-content;
      div{
        padding-right: 20px;
        line-height: 50px;
        text-align: center;
      }
      div::after{
        display: block;
        margin: -3px auto 0;
        width: 0px;
        height: 2px;
        content: '';
        background-color: #40a9ff;
      }
      .focus{
        color: #40a9ff;
      }
      .focus::after{
        width: 4em;
        transition: 0.5s;
      }
    }
  }
</style>